<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <style>

  </style>
</head>

<body>
  <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  <script type="text/javascript">
    let el = document.getElementById('main')
    let chart = echarts.init(el)
    chart.setOption({
      series: [{
        type: 'gauge',
        min: 0,
        max: 250,
        data: [{
          value: 100,
        }],
        startAngle: 180,
        endAngle: 0,
        axisLine: {
          show: false
        },
        progress: {
          show: true,
          width: 50,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'red' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'blue' // 100% 处的颜色
              }],
            }
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        radius: 200,
      }, {
        type: 'gauge',
        data: [{
          value: 250
        }],
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        startAngle: 180,
        endAngle: 0,
        axisLine: {
          lineStyle: {
            width: 5, // 仪表盘宽度
            color: [
              [250, 'hotpink']
            ], // 仪表盘颜色
          }
        },
        detail: {
          show: false
        },
        radius: 220
      }]
    })
  </script>
</body>

</html>